<template>
  <div class="record-container">
    <!-- Tabs 标签页 -->
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane
        v-for="item in typeDict"
        :key="item.dict_value"
        :label="item.dict_label"
        :name="item.dict_value"
      ></el-tab-pane>
    </el-tabs>

    <!-- 搜索和分页控件 -->
    <el-card class="filter-card">
      <el-form
        :inline="true"
        label-width="100px"
        :model="queryParams"
        class="demoFormInline"
      >
        <el-form-item label="载体">
          <el-select
            v-model="queryParams.zt"
            placeholder="请选择载体"
            clearable
            style="width: 200px"
          >
            <el-option label="联健元和" value="联健元和" />
            <el-option label="达博" value="达博" />
            <el-option label="科澜项目" value="科澜项目" />
            <el-option label="国科项目" value="国科项目" />
            <el-option label="黄埭项目" value="黄埭项目" />
            <el-option label="金扶梯" value="金扶梯" />
            <el-option label="北联新翼" value="北联新翼" />
            <el-option label="深圳项目" value="深圳项目" />
            <el-option label="西山项目" value="西山项目" />
            <el-option label="秦淮项目" value="秦淮项目" />
            <el-option label="双创中心" value="双创中心" />
            <el-option label="创界项目" value="创界项目" />
            <el-option label="江环项目" value="江环项目" />
            <el-option label="江北项目" value="江北项目" />
            <el-option label="拓展项目" value="拓展项目" />
            <el-option label="试点项目" value="试点项目" />
          </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
          <el-input v-model="queryParams.companyName" placeholder="请输入企业名称" />
        </el-form-item>
        <el-form-item label="客户编码">
          <el-input v-model="queryParams.customerCode" placeholder="请输入客户编码" />
        </el-form-item>
        <!-- <el-form-item label="联系人">
          <el-input v-model="queryParams.contactPerson" placeholder="请输入联系人" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="list-card" style="margin-top: 18px">
      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="80" align="left" />
        <el-table-column prop="zt" label="载体" min-width="120" align="left" />
        <el-table-column
          prop="companyName"
          label="企业名称"
          width="300"
          show-overflow-tooltip
          align="left"
        />
        <!-- <el-table-column prop="registeredCapital" label="注册资金(万)" min-width="140" />
        <el-table-column
          prop="estimatedTaxRevenue"
          label="预计税收(万)"
          min-width="140"
        /> -->
        <el-table-column
          prop="entryMode"
          label="入驻方式"
          min-width="100"
          align="left"
        />
        <el-table-column
          prop="industryCategory"
          label="行业分类"
          min-width="140"
          align="left"
        />
        <el-table-column prop="merchants" label="招商员" min-width="100" align="left" />
        <el-table-column
          prop="companyClass"
          label="注册类型"
          min-width="100"
          align="left"
        />
        <el-table-column
          prop="roomNum"
          label="房间号"
          min-width="80"
          width="250"
          show-overflow-tooltip
          align="left"
        />
        <el-table-column label="入驻状态" min-width="180" align="left">
          <template #default="scope">
            <el-tag type="primary">{{
              !scope.row.status || scope.row.status == 0
                ? "未开始入驻流程"
                : scope.row.status == 1
                ? "备案中"
                : scope.row.status == 2
                ? "合同拟定中"
                : scope.row.status == 3
                ? "办证中"
                : "已办结"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right" align="left">
          <template #default="scope">
            <el-button type="primary" link @click="viewCompanyDetail(scope.row)"
              >查看企业档案</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="fetchData"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { selectPage } from "@/api/company/info";

// 路由
const router = useRouter();

// 查询参数
const queryParams = reactive({
  companyName: "",
  customerCode: "",
  contactPerson: "",
  contactPhone: "",
  industry: "",
  settlementType: "",
  zt: "",
  pageNum: 1,
  pageSize: 10,
  type: undefined, // 添加type参数
});

// 表格数据
const tableData = ref([]);
// 分页信息
const total = ref(0);
// 加载状态
const loading = ref(false);

// 字典数据
const typeDict = ref([
  { dict_label: "全部", dict_value: null },
  { dict_label: "扩租", dict_value: "2" },
  { dict_label: "缩租", dict_value: "3" },
  { dict_label: "续租", dict_value: "4" },
  { dict_label: "退租", dict_value: "5" },
]);
// 激活的tab
const activeTab = ref(null); // 默认不传参数

// Tabs切换处理
const handleTabChange = (tabName) => {
  // 根据标签页设置type参数
  if (tabName === "") {
    queryParams.type = undefined; // 全部不传
  } else {
    queryParams.type = tabName; // 设置对应的type值
  }

  // 重置页码并重新获取数据
  queryParams.pageNum = 1;
  fetchData();
};

// 查看企业详情
const viewCompanyDetail = (row) => {
  router.push({
    path: "/lookCompany",
    query: {
      companyId: row.companyId,
    },
  });
};

// 获取数据
const fetchData = async () => {
  loading.value = true;
  try {
    queryParams.type == 0 ? null : queryParams.type;
    const res = await selectPage(queryParams);
    if (res && res.code == 200) {
      // 防御性处理，确保rows为数组
      let rows = [];
      if (Array.isArray(res.rows)) {
        rows = res.rows;
      } else if (
        res.rows &&
        typeof res.rows === "object" &&
        typeof res.rows.length === "number"
      ) {
        rows = Array.from(res.rows);
      }
      tableData.value = rows;
      total.value = res.total || 0;
    } else {
      tableData.value = [];
      total.value = 0;
    }
  } catch (error) {
    console.error("获取企业列表失败:", error);
    tableData.value = [];
    total.value = 0;
  } finally {
    setTimeout(() => {
      loading.value = false;
    }, 300);
  }
};

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1;
  fetchData();
};

// 重置表单
const resetForm = () => {
  // 重置查询参数
  Object.assign(queryParams, {
    companyName: "",
    customerCode: "",
    contactPerson: "",
    contactPhone: "",
    industry: "",
    settlementType: "",
    zt: "",
    pageNum: 1,
    pageSize: 10,
    type: undefined,
  });
  activeTab.value = ""; // 重置tab为全部
  fetchData();
};

// 组件挂载时获取数据和字典
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.record-container {
  padding: 20px;
}

.searchBox {
  margin-bottom: 20px;
}

.tableContainer {
  margin-bottom: 20px;
}
</style>
